<template>
  <div class="approve-task">
    <el-dialog
      :title="type == '2' ? '驳回' : '同意'"
      :visible.sync="showDialog"
      width="50%"
      :before-close="handleClose"
      @update:showDialog="toggleDialog"
    >
      <!-- 同意或者反对 -->
      <div class="opinion" v-if="type == 1">
        <div class="left-title">审批意见：</div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="opinion"
        >
        </el-input>
      </div>
      <!-- 驳回 -->
      <div class="reject" v-if="type == 2">
        <!-- <div class="opinion">
          <span class="tips">*</span>
          <div class="left-title">驳回方式：</div>
          <el-radio v-model="mode" label="1" disabled>驳回上一步</el-radio>
          <el-radio v-model="mode" label="2" disabled>驳回指定节点</el-radio>
          <el-select
            v-model="specifyNode"
            disabled
            placeholder="请选择驳回节点"
            size="small"
          >
            <el-option
              v-for="item in nodeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
        <div class="opinion">
          <div class="left-title">驳回意见：</div>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="opinion"
          >
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">确定</el-button>
        <el-button size="small" @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    //弹窗显、隐
    showDialog: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "1",
    },
    nodeList: {
      type: Array,
      default: () => {
        return [];
      }, //节点列表
    },
  },
  data() {
    return {
      mode: "2", // 驳回方式
      specifyNode: "", // 指定节点
      opinion: "", // 审批意见
      commonMessageList: [], // 常用语列表
    };
  },
  watch: {
    mode(newVal, oldVal) {
      if (newVal == 1) {
        this.specifyNode = "";
      }
    },
    nodeList:{
      handler(newVal, oldVal){
        this.specifyNode=this.nodeList[0].value
      },
      deep:true
    }
  },
  methods: {
    // 确认提交
    submit() {
      if (
        this.type == 2 &&
        (!this.mode || (this.mode == 2 && !this.specifyNode))
      ) {
        this.$message.error("请选择驳回方式或者指定节点");
        return;
      }
      this.$emit(
        "approvalConfirm",
        this.type,
        this.opinion,
        this.mode,
        this.specifyNode
      );
      this.toggleDialog();
    },
    // 弹窗关闭
    handleClose() {
      this.toggleDialog();
    },
    toggleDialog(visible = false) {
      this.$emit("update:showDialog", visible);
    },
  },
  created() {},
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
.approve-task {
  .opinion {
    display: flex;
    align-items: center;
    margin: 10px 0;
    .left-title {
      flex-basis: 80px;
      flex-shrink: 0;
      text-align: right;
    }
    .tips {
      color: red;
    }
  }
  .common-word {
    margin: 0 5px;
  }
  ::v-deep .el-dialog__footer {
    text-align: center;
  }
  ::v-deep .task-handle .el-empty {
    padding: 0 !important;
  }
}
</style>
